<template>
  <div style="text-align: left;">
    <router-link to="/home"><el-i class="fas fa-home" style="color: black;"></el-i></router-link>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input type="textarea" v-model="form.content"></el-input>
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload
          class="upload-demo"
          action="#"
          :before-upload="beforeUpload"
          :on-remove="handleRemove"
          :file-list="fileList"
          :show-file-list="false">
          <el-button size="small" type="primary" style="margin-left: 250px;">点击上传图片</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handSubmit" style="margin-left:350px ;">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import axios from 'axios';
import instance from '../api/server';

export default {
  name: "addBlogInfo",
  data() {
    return {
      form: {
        title: '',
        content: '',
        image: '', // 用来存储上传的图片路径
      },
      fileList: [], // 存储上传的图片列表
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 50, message: '标题长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 1, max: 500, message: '内容长度在 1 到 500 个字符', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    // 在上传前处理文件
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        ElMessage.error('只能上传图片!');
      }
      return isImage;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 如果没有上传图片，使用默认图片
          const imageUrl = this.fileList.length > 0 ? this.fileList[0].url : '../assets/login.jpg';
          this.addBlog(imageUrl);
        } else {
          ElMessage.error("表单验证失败");
        }
      });
    },
    async addBlog(imageUrl) {
      try {
        const response = await instance.post("/myinfo/blog/addpost", {
          title: this.form.title,
          content: this.form.content,
          image: imageUrl, // 将图片路径传给后台
        });
        if (!response.data.status) {
          ElMessage.success("提交成功");
          this.$router.push('/home'); // 提交成功后跳转到首页
        } else {
          ElMessage.error("不符合");
        }
      } catch (error) {
        console.error("提交失败", error);
        ElMessage.error("请求失败");
      }
    }
  },
  created() {
    // 可以在这里进行一些初始化操作
  }
}
</script>
<style scoped>
div {
  width: 80%;
  margin: 30px auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
  font-family: 'Arial', sans-serif; /* 设置字体 */
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input__inner, .el-textarea__inner {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
}

.el-input__inner:focus, .el-textarea__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.el-button {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  background-color: #409eff;
  color: #fff;
  border: none;
  transition: background-color 0.3s; /* 添加背景颜色过渡效果 */
}

.el-button:hover, .el-button:focus {
  background-color: #66b1ff;
}

.upload-demo {
  display: flex;
  align-items: center;
}

.upload-demo .el-button {
  margin-left: 10px;
}

.upload-demo .el-upload__tip {
  margin-left: 10px;
  color: #999;
  font-size: 14px;
}

/* 优化提示信息样式 */
.el-message {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.el-message--success {
  background-color: #f0f9eb;
  color: #67c23a;
}

.el-message--error {
  background-color: #fef0f0;
  color: #f56c6c;
}
</style>